除了WebXR API之外，要來認識很重要的基礎設施--渲染技術WebGL/WebGPU的比較。

大多教學都會把你當成都已經了解這些概念為前提的去講述。我們先了解一點點，幫助我們之後能比較順暢理解。

因為WebXR牽涉到3D世界，而3D世界又牽扯到電腦圖學。電腦圖學是一門又廣又深的學問，我們在此只要先知道圖形有一種常用的方式是由點連成線，構成面等幾何元素，再將色彩、灰階、線寬等非幾何屬性組成。而要將圖形從電腦的數據資料渲染到螢幕上，或者說是算繪出來，會WebGL/ WebGPU這種渲染技術去算繪。在 WebGL 或 WebGPU 進行算繪時，各別會用不同的著色器語言 (Shader Language)去跑在 GPU (圖形處理器) 上的小程式叫著色器 (Shader) 。

簡單來說渲染技術WebGL/WebGPU是什麼呢?

如果說WebXR API提供位置數據，那麼WebGL/WebGPU就是負責在該位置把東西畫出來的角色，他們透過著色器語言和硬體GPU溝通要怎麼把東西畫出來。具現化的比喻可說是如果電腦的GPU是你擁有的魔力量，必須透過魔法的施展(著色器語言)讓它呈現出來，而WebGL和WebGPU可以當成不同流派的施展方式，WebGL比較像是要詠唱的，WebGPU則是腦中成像的無詠唱。

WebGL/WebGPU都需要依附在 HTML 的 元素上的加速繪製能圖形能力的JavaScript API，本身不會在網頁上創造出一個新的可見區域。可以把WebGL和WebGPU想成是高效能畫筆，畫在canvas這個畫布上。

同樣都是加速繪製能圖形能力的JavaScript API，那麼一定要知道WebGL和WebGPU的差別：

• WebGL：現行的WebGL 2.0發布於2017 對應的GPU標準是3.0發布於2012。用純 WebGL 畫一個簡單的彩色立方體，可能就需要上百行程式碼，包含設定緩衝區 (buffers)、傳輸頂點資料、編譯著色器、設定矩陣變換等等。然而因為它太底層、太繁瑣了！為了簡化原生 WebGL 的複雜性，Three.js因應而生。Three.js身為一個基於WebGL 開發出的熱門3D libray，我相信很多前端都對Three.js不陌生。因為Three.js將WebGL包裝後易懂也易用很多，不僅有詳盡的官方文件，網路上也有很多資源。甚至還有建立在 Three.js 之上的元件化系統A-frame 。在我們談要不要選Three.js來開發之前，讓我們先接著了解WeGPU。
• WebGPU：WebGPU並不是WebGL的升級版，WebGPU是為現代GPU架構而全新打造並於2021年發布更高效能繪圖與運算API。API 設計更現代、更一致、更符合 JavaScript 開發習慣。解決了WebGL 在複雜場景的渲染能力有所限制的問題。WebGPU 的低負載特性讓開發者能渲染更複雜的場景，或在行動裝置上更省電，並能處理物理模擬 (粒子、布料、流體)、AI 運算、光線追蹤等，這些都是打造逼真 XR 世界的關鍵。

再講稍微深一點可以提到這兩者的著色器語言的不同，WebGPU的著色器語言WebGPU Shading Language(簡稱WGSL)也有個關鍵革新，原本的WebGL使用的著色器語言OpenGL Shading Languagee(簡稱GLSL)會因為不同硬體NVIDIA、AMD、Intel 的驅動程式對 GLSL 標準的實作有細微差異，可能導致同一份程式碼在不同硬體上行為不一致，產生難以除錯的 bug。而WebGPU的WGSL 程式碼是交給瀏覽器的。瀏覽器會先對其進行驗證和分析，然後再將其安全地翻譯成使用者裝置對應的底層著色器語言。

這麼說來畫布有了( HTML 的 )，畫筆有了(WebGL/WebGPU)，要在哪裡下筆的WebXR API也有了，那我是不是可以開始開發了呢？理論上可以的，但目前提到的工具都還是很底層，要從這裡打造可以互動的WebXR有點太遠，所以我們瞭解完這邊的原理後，下一篇會找上層一點的工具來幫助我們更有效率的達成想要開發的成品。